<template>
  <div class="LiveAnalysis">
    <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="数据总览" name="1">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="card">
              <div id="echartsA" style="width: 100%; height: 100%"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="card">
              <div id="echartsB" style="width: 100%; height: 100%"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="card">
              <el-radio-group v-model="type" size="small" fill="#7b94d8">
                <el-radio-button label="">全部</el-radio-button>
                <el-radio-button label="1">男主播</el-radio-button>
                <el-radio-button label="2">女主播</el-radio-button>
              </el-radio-group>
              <div
                id="echartsC"
                style="width: 100%; height: 93%; padding-top: 10px"
              ></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="card">
              <el-radio-group v-model="type2" size="small" fill="#7b94d8">
                <el-radio-button label="">全部</el-radio-button>
                <el-radio-button label="1">男主播</el-radio-button>
                <el-radio-button label="2">女主播</el-radio-button>
              </el-radio-group>
              <div
                id="echartsD"
                style="width: 100%; height: 93%; padding-top: 10px"
              ></div>
            </el-card>
          </el-col>
        </el-row>
        <el-card class="foot">
          <h3 class="titel">用户频道观看分布</h3>
          <el-radio-group v-model="type3" size="small" fill="#7b94d8">
            <el-radio-button label="">全部</el-radio-button>
            <el-radio-button label="1">男用户</el-radio-button>
            <el-radio-button label="2">女用户</el-radio-button>
          </el-radio-group>
          <div class="chartE">
            <div id="echartsE" style="width: 100%; height: 100%"></div>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="详细数据" name="2"> </el-tab-pane>
    </el-tabs> -->
    <el-card class="tableCard">
      <div class="head">
        <div class="titel">主播直播详情</div>
        <div class="search">
          <el-date-picker
            size="small"
            v-model="timeArr"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="timeOptions"
            value-format="yyyy-MM-dd"
            @change="focusA"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" size="small"
            >查询搜索</el-button
          >
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
        </div>
      </div>
      <el-radio-group v-model="type4" size="small" fill="#7b94d8">
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button label="1">男主播</el-radio-button>
        <el-radio-button label="2">女主播</el-radio-button>
      </el-radio-group>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <el-table-column prop="date" label="时间"> </el-table-column>
        <el-table-column prop="name" label="直播数"> </el-table-column>
        <el-table-column prop="address" label="直播总时长"> </el-table-column>
        <el-table-column prop="address" label="新增粉丝数"> </el-table-column>
        <el-table-column prop="address" label="新增男粉丝"> </el-table-column>
        <el-table-column prop="address" label="新增女粉丝"> </el-table-column>
        <el-table-column prop="address" label="获得总收益"> </el-table-column>
        <el-table-column prop="address" label="男粉丝贡献"> </el-table-column>
        <el-table-column prop="address" label="女粉丝贡献"> </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
    <el-card class="tableCard">
      <div class="head">
        <div class="titel">用户观看直播详情</div>
        <div class="search">
          <el-date-picker
            size="small"
            v-model="timeArrA"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="timeOptions"
            value-format="yyyy-MM-dd"
            @change="focusB"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" size="small"
            >查询搜索</el-button
          >
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
        </div>
      </div>
      <el-radio-group v-model="type5" size="small" fill="#7b94d8">
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button label="1">男用户</el-radio-button>
        <el-radio-button label="2">女用户</el-radio-button>
      </el-radio-group>
      <el-table
        :data="tableDataA"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <el-table-column prop="date" label="时间"> </el-table-column>
        <el-table-column prop="name" label="观看直播数"> </el-table-column>
        <el-table-column prop="address" label="观看总时长"> </el-table-column>
        <el-table-column prop="address" label="关注数"> </el-table-column>
        <el-table-column prop="address" label="关注男主播"> </el-table-column>
        <el-table-column prop="address" label="关注女主播"> </el-table-column>
        <el-table-column prop="address" label="总充值"> </el-table-column>
        <el-table-column prop="address" label="总打赏"> </el-table-column>
      </el-table>
      <pagination
        :total="totalA"
        :page.sync="pageA"
        :limit.sync="pageSizeA"
        @pagination="getListA"
      />
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
export default {
  components: { Pagination },
  data() {
    return {
      // activeName: "1",
      // type: "",
      // type2: "",
      // type3: "",
      type4: "",
      type5: "",
      // myChartA: null,
      // myChartB: null,
      // myChartC: null,
      // myChartD: null,
      // myChartE: null,
      timeArr: [],
      timeArrA: [],
      startDate: "",
      endDate: "",
      startDateA: "",
      endDateA: "",
      tableData: [{}, {}, {}],
      tableDataA: [],
      total: 0,
      page: "1",
      pageSize: 10,
      totalA: 0,
      pageA: "1",
      pageSizeA: 10,
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    handleClick() {},
    getList() {},
    getListA() {},
    focusA(time) {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startDate = this.timeArr[0];
      this.endDate = this.timeArr[1];
    },
    focusB(time) {
      if (!this.timeArr) {
        this.timeArrA = [];
      }
      this.startDateA = this.timeArrA[0];
      this.endDateA = this.timeArrA[1];
    },
    // //初始化Echarts
    // echartsInit() {
    //   //   this.myChart = this.$echarts.init(document.getElementById("echarts"));
    //   this.myChartA = this.$echarts.init(document.getElementById("echartsA"));
    //   this.myChartB = this.$echarts.init(document.getElementById("echartsB"));
    //   this.myChartC = this.$echarts.init(document.getElementById("echartsC"));
    //   this.myChartD = this.$echarts.init(document.getElementById("echartsD"));
    //   this.myChartE = this.$echarts.init(document.getElementById("echartsE"));
    // },
    // echartA() {
    //   var colors = ["#7b94d8", "#91CC75", "#ccc"];
    //   this.myChartA.setOption({
    //     color: colors,
    //     title: {
    //       text: "主播性别分布",
    //       left: "left",
    //     },
    //     tooltip: {
    //       trigger: "item",
    //     },
    //     legend: {
    //       orient: "vertical",
    //       left: "left",
    //       padding: [40, 0, 0, 0],
    //     },
    //     series: [
    //       {
    //         name: "性别分布",
    //         type: "pie",
    //         radius: "50%",
    //         data: [
    //           { value: 1048, name: "男" },
    //           { value: 735, name: "女" },
    //           { value: 580, name: "其他" },
    //         ],
    //         emphasis: {
    //           itemStyle: {
    //             shadowBlur: 10,
    //             shadowOffsetX: 0,
    //             shadowColor: "rgba(0, 0, 0, 0.5)",
    //           },
    //         },
    //       },
    //     ],
    //   });
    // },
    // echartB() {
    //   var colors = ["#7b94d8", "#91CC75", "#ccc"];
    //   this.myChartB.setOption({
    //     color: colors,
    //     title: {
    //       text: "直播时长对比",
    //       left: "left",
    //     },
    //     tooltip: {
    //       trigger: "item",
    //     },
    //     legend: {
    //       orient: "vertical",
    //       left: "left",
    //       padding: [40, 0, 0, 0],
    //     },
    //     series: [
    //       {
    //         name: "性别分布",
    //         type: "pie",
    //         radius: "50%",
    //         data: [
    //           { value: 1048, name: "男" },
    //           { value: 735, name: "女" },
    //           { value: 580, name: "其他" },
    //         ],
    //         emphasis: {
    //           itemStyle: {
    //             shadowBlur: 10,
    //             shadowOffsetX: 0,
    //             shadowColor: "rgba(0, 0, 0, 0.5)",
    //           },
    //         },
    //       },
    //     ],
    //   });
    // },
    // echartC() {
    //   var colors = ["#7b94d8", "#91CC75", "#ccc"];
    //   this.myChartC.setOption({
    //     color: colors,
    //     title: {
    //       text: "粉丝性别分布",
    //       left: "left",
    //     },
    //     tooltip: {
    //       trigger: "item",
    //     },
    //     legend: {
    //       orient: "vertical",
    //       left: "left",
    //       padding: [40, 0, 0, 0],
    //     },
    //     series: [
    //       {
    //         name: "性别分布",
    //         type: "pie",
    //         radius: "50%",
    //         data: [
    //           { value: 1048, name: "男" },
    //           { value: 735, name: "女" },
    //           { value: 580, name: "其他" },
    //         ],
    //         emphasis: {
    //           itemStyle: {
    //             shadowBlur: 10,
    //             shadowOffsetX: 0,
    //             shadowColor: "rgba(0, 0, 0, 0.5)",
    //           },
    //         },
    //       },
    //     ],
    //   });
    // },
    // echartD() {
    //   var colors = ["#7b94d8", "#91CC75", "#ccc"];
    //   this.myChartD.setOption({
    //     color: colors,
    //     title: {
    //       text: "粉丝性别分布",
    //       left: "left",
    //     },
    //     tooltip: {
    //       trigger: "item",
    //     },
    //     legend: {
    //       orient: "vertical",
    //       left: "left",
    //       padding: [40, 0, 0, 0],
    //     },
    //     series: [
    //       {
    //         name: "性别分布",
    //         type: "pie",
    //         radius: "50%",
    //         data: [
    //           { value: 1048, name: "男" },
    //           { value: 735, name: "女" },
    //           { value: 580, name: "其他" },
    //         ],
    //         emphasis: {
    //           itemStyle: {
    //             shadowBlur: 10,
    //             shadowOffsetX: 0,
    //             shadowColor: "rgba(0, 0, 0, 0.5)",
    //           },
    //         },
    //       },
    //     ],
    //   });
    // },
    // echartE() {
    //   var colors = ["#7b94d8", "#91CC75", "#ccc"];
    //   this.myChartE.setOption({
    //     color: colors,
    //     tooltip: {
    //       trigger: "axis",
    //       axisPointer: {
    //         type: "cross",
    //       },
    //     },
    //     grid: {
    //       right: "20%",
    //     },
    //     legend: {
    //       data: ["观看人数", "观看时长"],
    //     },
    //     xAxis: [
    //       {
    //         type: "category",
    //         axisTick: {
    //           alignWithLabel: true,
    //         },
    //         data: ["热门", "附近", "关注", "新人"],
    //       },
    //     ],
    //     yAxis: [
    //       {
    //         type: "value",
    //         name: "观看人数",
    //         min: 0,
    //         position: "right",
    //         axisLine: {
    //           show: true,
    //           lineStyle: {
    //             color: colors[0],
    //           },
    //         },
    //         axisLabel: {
    //           formatter: "{value} ",
    //         },
    //       },
    //       {
    //         type: "value",
    //         name: "观看时长(单位/小时)",
    //         min: 0,
    //         position: "right",
    //         offset: 100,
    //         axisLine: {
    //           show: true,
    //           lineStyle: {
    //             color: colors[1],
    //           },
    //         },
    //         axisLabel: {
    //           formatter: "{value} ",
    //         },
    //       },
    //     ],
    //     series: [
    //       {
    //         name: "观看人数",
    //         type: "bar",
    //         barWidth: 30,
    //         data: [10, 20, 15, 30],
    //       },
    //       {
    //         name: "观看时长",
    //         type: "bar",
    //         yAxisIndex: 1,
    //         barWidth: 30,
    //         data: [20, 30, 25, 40],
    //       },
    //     ],
    //   });
    // },
  },
  mounted() {
    // this.echartsInit();
    // this.echartA();
    // this.echartB();
    // this.echartC();
    // this.echartD();
    // this.echartE();
  },
};
</script>

<style lang="less" scoped>
.LiveAnalysis {
  padding: 20px;
  .card {
    height: 500px;
    margin-bottom: 20px;
    /deep/ .el-card__body {
      height: 100%;
      width: 100%;
    }
  }
  .foot {
    .titel {
      margin: 0px 0 20px !important;
    }
    .chartE {
      width: 100%;
      height: 500px;
    }
  }
  .tableCard {
    margin-bottom: 20px;
    .head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      .titel {
        font-weight: 700;
        font-size: 20px;
      }
    }
  }
}
</style>